import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import './index.less'

export default class MenuBar extends Taro.Component {

  navigateTo = url => {
    Taro.navigateTo({url}).then(function(value) {
      // success
    }, function(error) {
      Taro.switchTab({url});
    });
  }

  render() {
    const {menuList = []} = this.props;

    return (
      <View className='cat-wrapper'>
        {menuList && menuList.map(item => (
          <View className='item' key={item.id} onClick={this.navigateTo.bind(this, item.url)}>
            <View className='icon-wrapper' style={{backgroundColor: item.bgColor}}>
              <Text className={item.icon}/>
            </View>
            <Text className="text">{item.name}</Text>
          </View>
        ))}
      </View>
    )
  }
}
